<template>
	<view>
		<view class="top-bg"></view>
		<view class="content-wrap">
			<view class="form-wrap">
				<map id="myMap" ref="map1" :latitude="formData.latitude" :longitude="formData.longitude"
					:markers="markers" style="" :enable-scroll="false"></map>
				<view class="form-item yf-flex">
					<view class="form-label" style="padding-top: 20rpx;width:140rpx">
						当前位置
					</view>
					<view class="uni-input yf-flex" style="padding: 20rpx 0;">
						<tui-icon name="position" color="#3291F8" size="16"></tui-icon>
						<view class="address-text">
							{{formData.address}}
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-label yf-flex-left" style="width: 400rpx;">
						<text class="hint">*</text>请上传图片：<text class="hint-text">（1mb以内）</text>
					</view>
					<view class="uni-input" style="padding: 20rpx 0;">
						<tui-upload :value="formData.img?[imagePath+formData.img]:''" width="120" height="120"
							:serverUrl="serverUrl" @complete="result" @remove="remove" :limit="1"
							:sourceType="['camera']"></tui-upload>
					</view>
				</view>
				<view class="form-item">
					<view class="form-label" style="padding-top: 20rpx;">
						工作事由
					</view>
					<view class="uni-input" style="padding: 20rpx 0;">
						<textarea name="" v-model="formData.desc" placeholder="请输入工作事由" maxlength="30"
							class="textarea"></textarea>
						<view class="desc-num">
							{{formData.desc.length}}/30
						</view>
					</view>
				</view>
			</view>
			<view class="yf-flex-center submitBt" @click="formSubmit">提交</view>
		</view>
		<tui-datetime ref="dateTime" @confirm="change"></tui-datetime>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations,
		mapState
	} from 'vuex'
	import indexConfig from "@/config/index.config.js"
	import QQMapWX from '@/common/qqmap-wx-jssdk.min.js';
	var qqmapsdk = new QQMapWX({
		key: indexConfig.qqmapKey
	});
	export default {
		data() {
			return {
				serverUrl: indexConfig.baseUrl + "api/punch/uploadPic",
				formData: {
					address: "",
					approveId: "",
					approveUserId: "",
					desc: "",
					img: "",
					latitude: "",
					longitude: "",
					userId: ""
				},
				addrtitle: "",
				markers: [{
					id: 1,
					latitude: 0,
					longitude: 0,
					iconPath: '/static/common/woman_icon.png',
					width: uni.upx2px(60),
					height: uni.upx2px(60),
				}],
				info: "", //打卡信息
			};
		},
		onLoad(options) {
			this.info = JSON.parse(decodeURIComponent(options.info));
			if (this.info) {
				this.formData.approveId = this.info.approveId;
				this.formData.approveUserId = this.info.approveUserId;
			}
			// 判断授权
			this.getSetting()
		},
		computed: {
			...mapState(['userInfo', "imagePath"])
		},
		methods: {
			/*判断是否已经授权 */
			getSetting() {
				const that = this
				uni.getSetting({
					success(res) {
						if (res.authSetting['scope.userLocation']) {
							//获取位置
							that.getLocationInfo();
						} else {
							that.getAuthorize()
						}
					}
				})
			},
			// 自动授权 
			getAuthorize() {
				let that = this
				uni.authorize({
					scope: 'scope.userLocation',
					success(res) {
						//获取位置
						that.getLocationInfo();
					},
					// 授权失败 
					fail(err) {
						uni.showModal({
							title: '提示',
							content: '请授权位置获取当前位置!',
							showCancel: false,
							confirmText: '确认授权',
							success() {
								uni.openSetting({
									success(res) {
										if (res.authSetting['scope.userLocation'] == true) {
											//获取位置
											that.getLocationInfo();
										} else {
											that.getSetting();
										}
									},
									fail(err) {
										that.getSetting();
									}
								})
							}
						})
					}
				})
			},
			// 解析地址微信
			resolvedAddress(latitude, longitude) {
				let that = this;
				qqmapsdk.reverseGeocoder({
					coord_type: 5,
					location: {
						latitude,
						longitude
					},
					success: function(e) {
						console.log(e.result);
						// if (e.result && e.result.formatted_addresses && e.result.formatted_addresses
						// 	.recommend) {
						// 	that.addrtitle = e.result.formatted_addresses.recommend; //地址名
						// 	that.formData.address = e.result.formatted_addresses.recommend; //地址
						// }
						if (e.result && e.result.address_component) {
							// that.addrtitle = e.result.formatted_addresses.recommend; //地址名
							that.formData.address = e.result.address_component.province + e.result
								.address_component.city + e.result.address_component.district + (e.result
									.address_reference.town
									.title || '') + (e.result.address_component.street_number || e.result
									.address_component.street || "");; //地址 
						}
					},
					fail: err => {
						console.log(err);
					}
				});
			},
			// 获取当前定位
			getLocationInfo() {
				return new Promise((resolve) => {
					uni.getLocation({
						type: "gcj02",
						success: (res) => {
							let {
								longitude,
								latitude
							} = res;
							this.resolvedAddress(latitude, longitude)
							this.formData.latitude = latitude;
							this.formData.longitude = longitude;
							this.markers[0].latitude = latitude;
							this.markers[0].longitude = longitude;
							this.markers[0].iconPath = this.userInfo.gender == "女" ?
								'/static/common/woman_icon.png' : '/static/common/man_icon.png';

						},
						fail(err) {
							console.log(err)
						},
					});
				});
			},
			// 跳转
			jumpTo(url, param) {
				this.$Router.navigateTo(url, param)
			},
			// 上传图片返回
			result(e) {
				console.log(e, "eeeeeeeeeeeeeeee")
				if (e.imgArr.length > 0 && e.status == 1) {
					this.formData.img = e.imgArr[0];
				}
			},
			// 删除图片回调
			remove(e) {
				this.formData.img = "";
			},
			formSubmit: function() {
				let param = this.formData
				if (!param.img) {
					this.$api.msg("请上传图片")
					return
				}
				if (!param.desc) {
					this.$api.msg("请输入工作事由")
					return
				} 
				param.userId = this.userInfo.userId;
				console.log(param, "paramparam")
				this.$api.showLoading()
				//验证通过！
				this.$apis.punch(param).then((res) => {
					this.$api.hideLoading()
					console.log(res, '@@@@@@@@')
					if (res.code == 0) {
						this.$api.msg("打卡成功~")
						setTimeout(() => {
							this.$Router.navigateBack()
						}, 1500)
					} else {
						this.$api.msg(res.msg)
					}
				}).catch(() => {
					setTimeout(() => {
						this.$api.hideLoading()
					}, 1500)
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F4F8FB;
	}

	.top-bg {
		background: #3291F8;
		width: 100%;
		height: 200rpx;
	}

	.content-wrap {
		padding: 0 30rpx 30rpx;
		margin-top: -168rpx;
		width: 100%;

		.form-wrap {
			border-radius: 20rpx;
			background: #fff;
			padding: 22rpx 18rpx 22rpx;
			box-shadow: 0px 2rpx 6rpx 0px rgba(180, 180, 180, 40);

			#myMap {
				width: 100%;
				height: 494rpx;
			}

			.form-item {
				min-height: 107rpx;

				.form-label {
					font-size: 12+24rpx;
					width: 200rpx;

					.hint {
						color: #FF0000;
					}

					.hint-text {
						color: #7B7B7B;
						font-size: 12+20rpx;
					}
				}

				.uni-input {
					flex: 1;
					font-size: 12+24rpx;

					.textarea {
						font-size: 12+24rpx;
						border: 1rpx solid #c9c9c9;
						border-radius: 10rpx;
						height: 166rpx;
						padding: 6rpx;
						width: 100%;
					}

					.desc-num {
						text-align: right;
						color: #7b7b7b;
						font-size: 12+24rpx;
					}

					.address-text {
						margin-left: 16rpx;
						font-size: 12+24rpx;
					}
				}
			}

			.form-item:last-child {
				border: none
			}

		}

		.submitBt {
			margin-top: 26rpx;
			width: 100%;
			height: 80rpx;
			border-radius: 50rpx;
			color: #fff;
			background: #3291F8;
			font-size: 12+24rpx;
		}
	}
</style>